<template>
  <div class="components-container">
    <div id="search-div">
      <el-select v-model="requestJson.requestUrl" filterable placeholder="请选择接口URL" style="width:300px" @change="fectchData">
        <el-option v-for="requestUrl in requestUrlList" :key="requestUrl" :label="requestUrl" :value="requestUrl"/>
      </el-select>
      <el-select v-model="requestJson.timeStr" placeholder="请选择时间段" @change="fectchData">
        <el-option v-for="time in timeStrs" :key="time" :label="time" :value="time"/>
      </el-select>
      <el-button type="primary" @click="fectchData">查询</el-button>
    </div>
    <div id="myChart" :style="{}"/>
  </div>
</template>

<script>
var echarts = require('echarts');
import request from '@/utils/request';

export default {
  name: 'RequestTime',
  data() {
    return {
      requestUrlList: null,
      timeStrs: ['近60分钟的请求时长统计',
        '近一天的请求时长统计',
        '近7天的请求时长统计'],
      timeStrMap: { '近60分钟的请求时长统计': 'uri_minutes',
        '近一天的请求时长统计': 'uri_hours',
        '近7天的请求时长统计': 'uri_days' },
      requestJson: {
        requestUrl: '',
        timeStr: ''
      },
      chart: null,
      option: {
        title: {
          text: '接口请求时长及次数统计',
          x: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            animation: false
          }
        },
        legend: {
          data: ['最大值', '最小值', '平均值', '请求次数'],
          x: 'left'
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        axisPointer: {
          link: {
            xAxisIndex: 'all'
          }
        },
        dataZoom: [{
          show: true,
          realtime: true,
          start: 0,
          end: 100,
          xAxisIndex: [0, 1]
        },
        {
          type: 'inside',
          realtime: true,
          start: 0,
          end: 100,
          xAxisIndex: [0, 1]
        }
        ],
        grid: [{
          left: 50,
          right: 50,
          height: '35%'
        }, {
          left: 50,
          right: 50,
          top: '55%',
          height: '35%'
        }],
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          axisLine: {
            onZero: true
          },
          data: []
        },
        {
          gridIndex: 1,
          type: 'category',
          boundaryGap: false,
          axisLine: {
            onZero: true
          },
          data: [],
          position: 'top'
        }
        ],
        yAxis: [{
          name: '请求时长(秒)',
          type: 'value'
        },
        {
          gridIndex: 1,
          name: '请求次数(次)',
          type: 'value',
          inverse: true
        }
        ],
        series: [

          {
            name: '最大值',
            type: 'line',
            symbolSize: 8,
            hoverAnimation: true,
            data: []
          },
          {
            name: '最小值',
            type: 'line',
            symbolSize: 8,
            hoverAnimation: true,
            data: []
          },
          {
            name: '平均值',
            type: 'line',
            symbolSize: 8,
            hoverAnimation: true,
            data: []
          },

          {
            name: '请求次数',
            type: 'line',
            xAxisIndex: 1,
            yAxisIndex: 1,
            symbolSize: 8,
            hoverAnimation: true,
            data: []
          }
        ]
      }

    };
  },
  mounted() {
    this.initPage();
  },

  methods: {
    initPage() {
      if (!this.requestUrlList) {
        this.chart = echarts.init(document.getElementById('myChart'));
        this.chart.setOption(this.option);
        this.requestUrlList = [];
        request({
          url: '/v1/statistics/es/get_uri',
          method: 'get'
        }).then(response => {
          const data = response.data.aggregations.group_by_url.buckets;
          for (var i in data) {
            this.requestUrlList.push(data[i].key);
          }
          this.requestJson.requestUrl = this.requestUrlList[0];
          this.requestJson.timeStr = this.timeStrs[0];
          this.fectchData();
        });
      }
    },

    fectchData() {
      // eslint-disable-next-line no-unused-vars
      var date = '2015-03-05 17';
      // eslint-disable-next-line no-unused-vars
      var timestamp = new Date('2015-03-05 17:59:00.0').getTime();
      request({
        url: '/v1/statistics/es/' + this.timeStrMap[this.requestJson.timeStr] + '?uri=' + this.requestJson.requestUrl,
        method: 'get'
      }).then(response => {
        const data = response.data.aggregations.group_by_hour.buckets;
        this.option.title.text = this.requestJson.timeStr;
        const xAxis = [];
        const yAxis1 = [];
        const yAxis2 = [];
        const yAxis3 = [];
        const yAxis4 = [];
        for (var i in data) {
          xAxis.push(data[i].key);
          yAxis1.push(data[i].maxTime.value);
          yAxis2.push(data[i].minTime.value);
          yAxis3.push(data[i].avgTime.value);
          yAxis4.push(data[i].doc_count);
        }
        this.option.series[0].data = yAxis1;
        this.option.series[1].data = yAxis2;
        this.option.series[2].data = yAxis3;
        this.option.series[3].data = yAxis4;
        this.option.xAxis[0].data = xAxis;
        this.option.xAxis[1].data = xAxis;

        this.chart.clear();
        this.chart.setOption(this.option);
      });
    },

    handleTimeStrxAxis(xAxis) {

    }
  }
};
</script>

<style scoped>
  .components-container {
    position: relative;
    height: 100vh;
    padding: 20px;
  }
  #search-div{
    margin-left: 40px;
  }
  #myChart{
    width: 1400px;
    height: 800px;
    padding-top: 40px;
    padding-left: 40px;
  }
</style>
